// 代理模式

// 代理场景一：站长统计
// img 标签通过 src 可以向其它域名下的服务器发送请求，且是单向的，不会有响应数据。
// 站长平台统计原理：触发事件时向站长平台发送这类 img 的 get 请求
// 例：站长统计代理
var Count = (function() {
  // 缓存图片（参考第二十二章，备忘录模式）
  var _img = new Image();
  // 返回统计函数
  return function(param) {
    // 统计请求字符串
    var str = 'http://www.count.com/a.gif?';
    // 拼接请求字符串
    for (var key in param) {
      str += `${key}=${param[key]}`;
    }
    // 发送统计请求
    _img.src = str;
  }
}());
// 测试,统计 num
Count({num: 10});


// 代理场景二：JSONP
// 通过script标签跨域发送 get 请求
// JSONP 跨域原理：通过向页面动态插入script标签的方式发送请求吗，执行回调，最后移除标签
// 1.前端浏览器页面
<srcipt type="text/javascript">
// 回调函数，打印出请求数据与响应数据
function jsonpCallBack(res, req) {
  console.log(res, req);
}
</script>
<script type="text/javascript" src="http://localgost/test/jsonp.php?callback=jsonpCallBack&data=getJsonpData"></script>
// 2.另一个域下服务器请求接口
<?php
$data = $_GET['data'];
$callback = $_GET['callback'];
echo $callback . "('success', '" . $data . "')";
?>


// 代理场景三：代理模板
// 例：X域A页面通过 向Y域发请求且重定向的方式 代理X域的B页面
// X域中被代理页面A
<script type="text/javascript">
function callback(data) {
  console.log('成功接收数据', data);
}
</script>
<iframe name="proxyIframe" id="proxyIframe" src=""></iframe>
<form action="http://localhost/test/proxy.php" method="post" target="proxyIframe">
  <input type="text" name="callback" value="callback">
  <input type="text name="proxy" value="http://localhost:8080/proxy.html">
  <input type="submit" value="提交">
</form>

// X域中代理页面B
<script type="text/javascript">
  // 页面加载后执行
  window.onload = function() {
    // 如果不在A页面中返回，不执行
    if(top == self) return;
    // 获取并解析searcher中的数据
    var arr = location.search.substr(1).split('&');
    // 预定于函数名称以及参数
    var fn, args;
    for (var i = 0, len = arr.length, item; i < len; i++) {
      // 解析searcher中的魅族数据
      item = arr[i].split('=');
      // 判断是否为回调函数
      if (item[0] == 'callback') {
        // 设置回调函数
        fn = item[1];
      // 判断是否时参数集
      } else if (item[0] == 'arg') {
        // 设置参数
        args = item[1];
      }
    }
    try {
      // 执行A页面中预设的回调函数
      eval('top.' + fn + '("' + args + '")');
    } catch(e) {}
  }
</script>

// proxy.php
// Y域，将从X域过来的请求数据解析并获取回调函数字段与代理模板路径字段数据，并打包返回，并将自己的header重定向为X域的代理模板B所在路径
<?php
$proxy = $_POST['proxy'];
$callback = $_POST['callback'];
header('location:' . $proxy . '?callback=' . $callback . '&arg=success');
?>




